<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

<div class="headertop_desc">
			<div class="call">
				<p>
					<span>Need help?</span> call us <span class="number">1-22-3456789</span></span>
				</p>
			</div>
			<div class="account_desc">
				<ul>
					<li><a href="#">Register</a></li>
					<li><a href="#">Login</a></li>
					<li><a href="#">Delivery</a></li>
					<li><a href="checkout.html">Checkout</a></li>
					<li><a href="#">My Account</a></li>
				</ul>
			</div>
			<div class="clear">
			</div>
		</div>
		<div class="header_top">
			<div class="logo">
				<a href="index.html"><img src="/shopping-mall/resources/images/shop/logo.png" alt=""/></a>
			</div>
			<div class="cart">
					Welcome to our Online Store! <span>Cart:</span>
					<div id="dd" class="wrapper-dropdown-2">
					<!-- item(s) in your cart   -->	
						<ul class="dropdown-1">
							<c:if test="${!empty cart}">
								<c:forEach items="${cart.items}" var="item" varStatus="status">
									<li>Product :${item.name} - Price :${item.price} - Quantity :${item.quantity} - <a href="javascript:delItem(${status.count-1})">Delete</a></li>
								</c:forEach>					
							</c:if>						
						</ul>
					</div>		
			</div>
			<script type="text/javascript">
			function DropDown(el) {
				this.dd = el;
				this.initEvents();
			}
			DropDown.prototype = {
				initEvents : function() {
					var obj = this;
					obj.dd.on('click', function(event){
						$(this).toggleClass('active');
						event.stopPropagation();
					});	
				}
			}
			$(function() {
				var dd = new DropDown( $('#dd') );
				$(document).click(function() {
					// all dropdowns
					$('.wrapper-dropdown-2').removeClass('active');
				});
			});
		</script>
			<div class="clear">
			</div>
		</div>
		<div class="header_bottom">
			<div class="menu">
				<ul>
					<li><a href="home-shop.html">Home</a></li>
					<li><a href="about-shop.html">About</a></li>
					<li><a href="delivery-shop.html">Delivery</a></li>
					<li><a href="news-shop.html">News</a></li>
					<li><a href="contact-shop.html">Contact</a></li>
				<!-- <div class="clear">
					</div> -->	
				</ul>
			</div>

			<div class="clear">
			</div>
		</div>